<template>
  <div class="v-child-body">
    <div class="ns-subHeader">
      <div class="ns-tabs">
        <div class="buttons-tab movieTab">
          <div class="leftButtons">无锡</div>
          <div class="centerButtons">
            <mt-navbar v-model="selected">
              <mt-tab-item id="1">正在热映</mt-tab-item>
              <mt-tab-item id="2">即将上映</mt-tab-item>
            </mt-navbar>
          </div>
          <div class="rightButtons"></div>
        </div>
      </div>
    </div>
    <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <!-- tab-container -->
      <mt-tab-container class="page-loadmore-wrapper" v-model="selected" ref="wrapper">
        <mt-tab-container-item id="1">
          <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
            :bottom-all-loaded="allLoaded" ref="loadmore">
           
            <MovieList :movieData="hotfilmlist"></MovieList>

            <div slot="top" class="mint-loadmore-top">
              <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">下拉刷新更多</span>
              <span v-show="topStatus === 'loading'">
                <mt-spinner type="snake" style="display:inline-block;height: 28px;width: 28px;"></mt-spinner>
              </span>
            </div>
            <div slot="bottom" class="mint-loadmore-bottom">
              <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">上拉加载更多</span>
              <span v-show="bottomStatus === 'loading'">
                <mt-spinner type="snake" style="display:inline-block;height:28px;width:28px;"></mt-spinner>
              </span>
            </div>
          </mt-loadmore>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <mt-loadmore :top-method="loadTop2" @top-status-change="handleTopChange2" :bottom-method="loadBottom2" @bottom-status-change="handleBottomChange2"
            :bottom-all-loaded="allLoaded2" ref="loadmore">
            <ul>
              <li class="page-loadmore-listitem" v-for="item in list" :key="item">{{ item }}</li>
            </ul>
            <div slot="top" class="mint-loadmore-top">
              <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">下拉刷新更多</span>
              <span v-show="topStatus === 'loading'">
                <mt-spinner type="snake" style="display:inline-block;height: 28px;width: 28px;"></mt-spinner>
              </span>
            </div>
            <div slot="bottom" class="mint-loadmore-bottom">
              <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">上拉加载更多</span>
              <span v-show="bottomStatus === 'loading'">
                <mt-spinner type="snake" style="display:inline-block;height: 28px;width: 28px;"></mt-spinner>
              </span>
            </div>
          </mt-loadmore>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
  import { Navbar,TabItem,Loadmore,InfiniteScroll} from 'mint-ui';
  import MovieList from "@/components/movieListItem";
  import commonMoudle from '../../../static/js/common.js';

  export default {
    data() {
      return {
        hotfilmlist:[],
        list: [],
        selected: '1',
        allLoaded: false,
        allLoaded2: false,
        topStatus: '',
        bottomStatus: '',
        wrapperHeight: 0
      }
    },
    mounted() {
      var $this = this;
      this.wrapperHeight = document.documentElement.clientHeight - 55;
      let _args = {
        cityid: 1
      };
      let headers = commonMoudle.createHead(true, false, {}, _args);
      
      commonMoudle.doPostForm('', function success(data) {
        console.log('____--',data.data.result)
        console.log('$this.hotfilmlist',$this.hotfilmlist)
       $this.hotfilmlist = data.data.result;
        console.log('$this.hotfilmlist',$this.hotfilmlist)
      }, function () {}, true, '/film/gethotfilmlist', commonMoudle.createHead(true, false, {}, _args), $this.$qs.stringify(_args))



      console.log('commonMoudle_', commonMoudle.createHead(true, false, {}, _args))
    },
    components: {
      Navbar,
      TabItem,
      Loadmore,
      InfiniteScroll,
      MovieList
    },
    methods: {
      handleTopChange(status) {
        this.topStatus = status;
      },
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      loadTop() {   
        let $this = this;  
          let _args = {
            cityid: 1
          };
          let headers = commonMoudle.createHead(true, false, {}, _args);
          
          commonMoudle.doPostForm('', function success(data) {
            console.log('loadTop--',data.data.result)
            $this.hotfilmlist = data.data.result;
            $this.$refs.loadmore.onTopLoaded();
          }, function () {}, true, '/film/gethotfilmlist', commonMoudle.createHead(true, false, {}, _args), $this.$qs.stringify(_args))
          
      },
      loadBottom() {
        setTimeout(() => {
          let lastValue = this.list[this.list.length - 1];
          if (lastValue < 40) {
            for (let i = 1; i <= 10; i++) {
              this.list.push(lastValue + i);
            }
          } else {
            this.allLoaded = true;
          }
          this.$refs.loadmore.onBottomLoaded();
        }, 1500);
      },
      loadMore() {
        this.loading = true;
        setTimeout(() => {
          let last = this.list[this.list.length - 1];
          for (let i = 1; i <= 10; i++) {
            this.list.push(last + i);
          }
          this.loading = false;
        }, 1500);
      },
      handleTopChange2(status) {
        this.topStatus = status;
      },
      handleBottomChange2(status) {
        this.bottomStatus = status;
      },
      loadTop2() {
        setTimeout(() => {
          let firstValue = this.list[0];
          for (let i = 1; i <= 10; i++) {
            this.list.unshift(firstValue - i);
          }
          this.$refs.loadmore.onTopLoaded();
        }, 1500);
      },
      loadBottom2() {
        setTimeout(() => {
          let lastValue = this.list[this.list.length - 1];
          if (lastValue < 40) {
            for (let i = 1; i <= 10; i++) {
              this.list.push(lastValue + i);
            }
          } else {
            this.allLoaded = true;
          }
          this.$refs.loadmore.onBottomLoaded();
        }, 1500);
      },
      loadMore2() {
        this.loading = true;
        setTimeout(() => {
          let last = this.list[this.list.length - 1];
          for (let i = 1; i <= 10; i++) {
            this.list.push(last + i);
          }
          this.loading = false;
        }, 1500);
      }
    }
  }

</script>

<style scoped>
.buttons-tab:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #d0d0d0;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3){
  .buttons-tab:after {
      -webkit-transform: scaleY(.33);
      transform: scaleY(.33);
  }
}
  .v-child-body {
    width: 100%;
    overflow-x: hidden;
    height: calc(100% - 55px);
  }

  .page-loadmore-wrapper {
    overflow: scroll;
  }

  .page-mint-loadmore-bottom span {
    display: inline-block;
    transition: .2s linear;
    vertical-align: middle;
  }

  .ns-subHeader {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    background-color: #fff;
  }

  .ns-tabs .movieTab {
    position: relative;
    padding: 15px 16px;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .mint-tab-container {
    padding-top: 50px;
  }

  .ns-tabs .movieTab .leftButtons {
    position: absolute;
    left: 16px;
    font-size: 15px;
    line-height: 26px;
    color: #888;
  }

  .ns-tabs .movieTab .rightButtons {
    position: absolute;
    right: 16px;
    font-weight: 700;
    color: #d9534f;
  }
  .centerButtons .mint-navbar{
    display: block;
  }
  .ns-tabs .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 0;
    color: #d9534f;
  }

  .ns-tabs .mint-navbar .mint-tab-item {
    position: relative;
    display: inline-block;
    height: auto;
    width: auto;
    font-size: 15px;
    color: #888;
    padding: 0 9px;
    border: none;
    line-height: 1;
  }

  .ns-tabs .mint-navbar .mint-tab-item.is-selected:after {
    position: absolute;
    content: '';
    left: 25%;
    right: 25%;
    bottom: -10px;
    height: 2px;
    background: #d9534f;
  }

</style>
